<template>
    <div>
        <div>
            <el-config-provider :locale="zhCn"> <!--《:locale="zhCn 》设置语言-->

                <!-- 工作日历 -->
                <el-row :gutter="24">
                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                            <el-form-item label="工作日历" label-position="top"
                                :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                <div class="progress-bar">
                                    <div class="progress"></div>
                                </div>
                            </el-form-item>

                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="日期时间" label-position="top">
                                <el-date-picker v-model="formData.dateTime" style="width: 354px;" type="date"
                                    placeholder="" :size="size"  value-format="YYYY-MM-DD"/>

                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="星期" label-position="top">
                                <el-input v-model="formData.week" placeholder="" style="width: 354px;" />
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="工作状态" label-position="top">
                                <el-select v-model="formData.workingCondition" style="width: 354px;" clearable
                                    filterable>
                                    <el-option v-for="item in statusOptions" :key="item.value" :label="item.label"
                                        :value="item.label">
                                        <el-tag :type="item.type" effect="dark">
                                            {{ item.label }}
                                        </el-tag>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="详情" label-position="top">
                                <el-input v-model="formData.particulars" placeholder="" style="width: 354px;" />
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="节日" label-position="top">
                                <el-input v-model="formData.festival" placeholder="" style="width: 354px;" />
                            </el-form-item>
                        </div>
                    </el-col>

                    <el-col :span="24">
                        <div class="grid-content ep-bg-purple-light"><el-form-item label="节假日加班补偿规定"
                                label-position="top">
                                <el-input v-model="formData.compensationProvisions" placeholder=""
                                    style="width: 354px;" />
                            </el-form-item>
                        </div>
                    </el-col>

                    <!--  -->
                    <el-col :span="24">
                        <!-- 空白分隔区域 -->
                        <div style="height: 10px; border-top: 0px dashed #e4e7ed; margin: 6px 0;"></div>
                    </el-col>

                    <div class="bottom-submit-bar">
                        <el-button type="primary" @click="onSubmit">提交</el-button>
                        <!-- <el-button>保存草稿</el-button> -->
                    </div>

                </el-row>
            </el-config-provider>
        </div>
    </div>
</template>

<script setup>
import { ref, defineEmits, watch } from 'vue';
import zhCn from 'element-plus/es/locale/lang/zh-cn';
import { ElMessage, ElMessageBox } from 'element-plus';
import request from '@/api/request';
import router from '@/router';
import { type } from 'jquery';

let emits = defineEmits(['ref-table']);
let formData = ref({});

let onSubmit = () => {
    console.log(formData.value);
    request({
        url: '/workingCalendar/insert',
        method: 'post',
        data: formData.value
    }).then(res => {
        ElMessage.primary(res.msg);
        emits('ref-table');
    })
}

let weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];

// 监听日期时间变化
watch(
    () => formData.value.dateTime,
    (newDate) => {
        if (newDate) {
            // 创建日期对象并获取星期
            const date = new Date(newDate);
            const dayOfWeek = date.getDay(); // 0-6，0表示星期日
            formData.value.week = weekdays[dayOfWeek];
        } else {
            // 如果没有选择日期，清空星期字段
            formData.value.week = '';
        }
    }
);

const statusOptions = ref([
    { value: 'workday', label: '工作日', type: 'success' },
    { value: 'dayoff', label: '公休日', type: 'primary' },
    { value: 'holiday', label: '节假日', type: 'warning' },
])

</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}

.bottom-submit-bar {
    /* position: fixed; */
    /* 固定定位 */
    bottom: 0;
    /* 靠底部 */
    left: 0;
    width: 100%;
    background-color: #fff;
    /* 背景色，可根据需求调整 */
    border-top: 1px solid #eaeaea;
    /* 顶部边框，与页面区分 */
    padding: 12px 24px;
    /* 内边距，适配截图里的间距风格 */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* 按钮靠左，可根据实际需求调整 */
    z-index: 10;
    /* 提高层级，避免被其他内容覆盖 */
}
</style>
